<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom :isSearch="true" :searchValue.sync="searchValue" @change="searchChange" />
		<view class="fboxRow Ycenter tab-nav" v-if="searchValue">
			<view class="flex1 fboxRow Ycenter Xcenter font28" :class="index == activeTab ? 'active' : ''"
				v-for="(item, index) in list" :key="index" @tap="navChange(index)">
				<text class="nav fboxRow Ycenter Xcenter">{{item.name}}</text>
			</view>
		</view>
		<block v-for="(item, index) in dataList.list" :key="index">
			<datum-pic v-if="activeTab == 1" :innerData="item" layoutType="0" />
			<topic-pic v-else :innerData="item" layoutType="0" />
		</block>
		<template v-if="searchValue">
			<u-loadmore height="88rpx" fontSize="24rpx" color="#999" :status="dataList.loading" />
		</template>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import topicPic from './components/topic-pic.vue';
	import datumPic from './components/datum-pic.vue';
	import {
		datumList,
		topicList
	} from '@/api/bks.datum.js';
	export default {
		components: {
			headerCustom,
			topicPic,
			datumPic
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				activeTab: 0,
				list: [{
						name: '专题',
						index: 1,
					},
					{
						name: '资料',
						index: 2
					},
				],
				dataList: {
					list: [],
					page: 1,
					size: 20,
					count: 0,
					loading: 'none'
				},
				searchValue: ''
			}
		},
		onLoad(option) {
			// this.init()
			// this.getDataList()
		},
		methods: {
			searchChange(e) {
				this.searchValue = e
				if(e){
					this.init()
					this.getDataList()
				}else{
					this.init()
				}
			},
			navChange(index) {
				this.activeTab = index
				this.init()
				this.getDataList()
			},
			// 设置年级
			gradeChange(e) {
				this.filters.grade = e.gradeId
				this.init()
				this.getDataList()
			},
			// 数据初始化
			init() {
				this.dataList = {
					list: [],
					page: 1,
					size: 10,
					total: 0,
					loading: 'none'
				}
			},
			// 获取列表数据
			getDataList() {
				if (this.dataList.loading == 'not') {
					return
				}
				this.dataList.loading = 'loading'
				const {
					filters,
					activeTab,
					dataList: {
						list,
						page,
						size
					}
				} = this
				const parant = {
					...filters,
					page,
					size,
					specialSubjectName: this.searchValue
				}
				const fun = activeTab == 1 ? datumList : topicList
				fun(parant).then(res => {
					this.dataList.list = this.dataList.list.concat(res.data.list)
					const {
						total,
						page,
						size
					} = res.data.pageInfoVO
					if (total == 0) {
						this.dataList.loading = 'list-not'
					} else if (total < size || page * size >= total) {
						this.dataList.loading = 'nomore'
					}
					this.dataList.count = total
				})
			},
		},
		onReachBottom() {
			const {
				page,
				size,
				count,
				loading
			} = this.dataList
			if (loading == 'nomore') {
				return
			}
			if (page * size < count) {
				this.dataList.page = page + 1
				this.getDataList()
			} else {
				this.dataList.loading = 'nomore'
			}
		},
	}
</script>

<style lang="scss" scoped>
	/**index.wxss**/
	.header {
		padding: 24rpx 30rpx;
	}

	.item .user-box {
		padding: 0 30rpx;
	}

	.item .user-box .left image {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		margin-right: 19rpx;
	}

	.item .user-box .right .vipPrice {
		margin-right: 7rpx;
	}

	.item .user-box .right .price {
		text-decoration: line-through;
	}

	.item .title {
		padding: 0 30rpx;
		margin: 30rpx 0 19rpx;
	}

	.item .pic {
		width: 100%;
		height: 340rpx;
		padding: 30rpx 0 0;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
	}

	.item .pic .bg {
		width: 223rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #6871FE;
		border-radius: 0px 32rpx 32rpx 0px;
		text-align: center;
	}

	.tab-nav {
		position: relative;
		border-bottom: 1rpx solid #eee;
		color: #9899A1;
		z-index: 6;
		background-color: #fff;
	}

	.tab-nav .nav {
		height: 88rpx;
	}

	.tab-nav .active {
		color: #00C15D;
	}

	.tab-nav .active .nav {
		border-bottom: 4rpx solid #00C15D;
	}
</style>